/**
 * 入参
 *
 */
import React, { PureComponent } from 'react';
import { InputC, SelectC, IconC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col } from 'antd';
import { connect } from 'dva';
import myStyle from './myStyle.less';
const formItemLayout = {
  labelCol: {
    xs: { span: 2, offset: 0 },
    sm: { span: 2, offset: 0 },
    md: { span: 2, offset: 0 },
    lg: { span: 2, offset: 0 },
    xl: { span: 2, offset: 0 },
    xxl: { span: 2, offset: 0 },
  },
  wrapperCol: {
    xs: { span: 21, offset: 0 },
    sm: { span: 21, offset: 0 },
    md: { span: 21, offset: 0 },
    lg: { span: 21, offset: 0 },
    xl: { span: 21, offset: 0 },
    xxl: { span: 21, offset: 0 },
  },
};
@Form.create()
class OperatorC extends PureComponent {
  state = {
    operatorNumberList: this.props.data,
  };
  componentDidMount() {
    this.props.onRef(this);
    this.setState({
      operatorNumberList: this.props.data,
    });
  }
  // 加
  add = () => {
    const nextList = this.state.operatorNumberList.concat({});
    this.props.form.setFieldsValue({ account: [...nextList] }); //operatorNumberList不能更新form表单，form表单也必须更新值，否则增减都会有问题
    this.setState({
      operatorNumberList: [...nextList],
    });
  };
  // 删除
  del = (index) => {
    // if (this.state.operatorNumberList.length === 1) { //剩余一条不可删除
    //     return;
    // }
    const nextList = this.state.operatorNumberList.filter((item, key) => key !== index);
    this.props.form.setFieldsValue({ account: [...nextList] }); //operatorNumberList不能更新form表单，form表单也必须更新值，负责增减都会有问题
    this.setState({
      operatorNumberList: [...nextList],
    });
  };
  //抛出数据
  getInfo = () => {
    let obj;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // if(values.)
        obj = values;
      }
    });
    return obj;
  };
  //校验通道标识是否重复
  checkChannelIdentify = (rule, value, callback, index) => {
    const {
      form: { getFieldsValue, validateFields },
    } = this.props;
    const tempArr = getFieldsValue().account;
    //  除自己外的所有数据
    const arr = [];
    tempArr.map((item, key) => {
      if (key != index) {
        //除去自己 比对是否有重复
        let obj = JSON.parse(JSON.stringify(item));
        obj.key = key;
        arr.push(obj);
      }
    });
    if (arr.find((item) => item.channelIdentify == value && value)) {
      callback('通道标识不能重复定义。');
    } else {
      if (this.field === rule.field) {
        const remainArr = [];
        arr.map((item, index) => {
          remainArr.push(`account[${item.key}].channelIdentify`);
        });
        validateFields(remainArr, { force: true }); //此处出现错误，不会被浏览器捕获（不会在控制台抛错），会导致出错代码后的正常代码无法正常执行
      }
      callback();
    }
  };
  //所添加的行是否都有信息
  checkIsChannelIdentify = (rule, value, callback, index) => {
    const {
      form: { getFieldsValue },
    } = this.props;
    const tempArr = getFieldsValue().account;
    //  校验 所添加的行是否都有信息
    if (tempArr[index]?.operatorId && !value) {
      // 编号有值，如果通道标识无值，则校验不通过
      callback('请填写完整的操作员信息。');
    } else {
      callback();
    }
  };
  //所添加的行是否都有信息
  checkOperatorId = (rule, value, callback, index) => {
    const {
      form: { getFieldsValue },
    } = this.props;
    const tempArr = getFieldsValue().account;
    //  校验 所添加的行是否都有信息
    if (tempArr[index]?.channelIdentify && !value) {
      // 编号有值，如果通道标识无值，则校验不通过
      callback('请填写完整的操作员信息。');
    } else {
      callback();
    }
  };

  //更新数据
  onChange = (index, name, event, field) => {
    const { operatorNumberList } = this.state;
    this.field = field;
    let tempArr = [...operatorNumberList];
    if (name === 'channelIdentify') {
      // 通道标识
      tempArr[index] = { ...tempArr[index], channelIdentify: event };
    } else {
      // 操作员编号
      tempArr[index] = { ...tempArr[index], operatorId: event.target.value };
    }
    this.setState({
      operatorNumberList: [...tempArr],
    });
  };

  render() {
    const {
      userManageNewM: { operatorNumber },
    } = this.props;
    const { operatorNumberList } = this.state;
    return (
      <div>
        <Form.Item label='操作员编号' {...formItemLayout}>
          <div>
            {operatorNumberList &&
              operatorNumberList.map((item, index) => {
                return (
                  <Row key={index}>
                    <Col span={5} style={{ marginRight: '16px' }}>
                      <SelectC
                        form={this.props.form}
                        dataIndex={`account[${index}].channelIdentify`}
                        dataSource={operatorNumber}
                        initialValue={item.channelIdentify}
                        showSearch={false}
                        style={{ width: '98%' }}
                        rules={[
                          { validator: (rule, value, callback) => this.checkChannelIdentify(rule, value, callback, index) },
                          { validator: (rule, value, callback) => this.checkIsChannelIdentify(rule, value, callback, index) },
                        ]}
                        placeholder={'请选择通道标识'}
                        onChange={(event) => this.onChange(index, 'channelIdentify', event, `account[${index}].channelIdentify`)}
                      />
                    </Col>
                    <Col span={5}>
                      <div style={{ paddingBottom: ' 8px', width: '98%' }}>
                        <InputC
                          form={this.props.form}
                          dataIndex={`account[${index}].operatorId`}
                          initialValue={item.operatorId}
                          placeholder={'请输入操作员编号'}
                          rules={[{ validator: (rule, value, callback) => this.checkOperatorId(rule, value, callback, index) }]}
                          onChange={(event) => this.onChange(index, 'operatorId', event, `account[${index}].operatorId`)}
                        />
                      </div>
                    </Col>
                    {/* {operatorNumberList.length <= 1 ? '' : <IconC type={'minus'} onClick={() => this.del(index)} style={{ margin: '10px' }} />} */}
                    <IconC type={'minus'} onClick={() => this.del(index)} style={{ margin: '10px' }} />
                  </Row>
                );
              })}
          </div>
        </Form.Item>
        <IconC type={'plus'} onClick={this.add} style={{ marginLeft: '8.3%', marginBottom: '16px' }} />
      </div>
    );
  }
}
export default connect(({ userManageNewM }) => ({
  userManageNewM,
}))(OperatorC);
